<template>
  <div class="box">
    <aside-box>
      <template #zh> 柱状图 </template>
      <template #en> bar chart </template>
      <div class="bar" ref="barRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";

import * as echarts from "echarts";
const xData = [
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月",
];
const yData = [
  10, 10, 8, 9, 13, 13, 15, 8, 11, 7, 15, 14
];
const yData2 = [
  5, 6, 2, 5, 8, 8, 7, 5, 5, 3, 8, 6,];

const option = {
  tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    top: "50px",
    right: "2",
    bottom: "2%",
    containLabel: true,
  },
  legend: {
    itemGap: 50,
    data: ["同比", "环比"],
    textStyle: {
      color: "#fff",
      fontSize: 12,
      fontFamily: "阿里妈妈数黑体 Bold",
    },
    itemWidth: 12,
    itemHeight: 12,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: true,
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: false,
        lineStyle: {
          color: "#f9f9f9",
        },
      },
      axisLabel: {
        interval: 0,
        color: "#fff",
        fontFamily: "阿里妈妈数黑体 Bold",
        // rotate: 45,
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
      data: xData,
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#0a3256",
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
          fontSize: 12,
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    // 柱形图
    {
      name: "同比",
      type: "bar",
      label: {
        show: true,
        position: "top",
        formatter: function (param) {
          return param.value;
        },
        textStyle: {
          color: "#ffffff",
          fontSize: 12,
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
      barWidth: 14,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
          {
            offset: 0,
            color: "#00FFE3",
          },
          {
            offset: 1,
            color: "#4693EC",
          },
        ]),
        barBorderRadius: [30, 30, 30, 30],
      },
      data: yData,
    },
    // 折线图
    {
      name: "环比",
      type: "line",
      showAllSymbol: true,
      symbol: "emptyCircle",
      symbolSize: 8,
      lineStyle: {
        normal: {
          width: 3,
          color: "#28ffb3", // 线条颜色
        },
        borderColor: "#f0f",
      },
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#fff",
          fontSize: 12,
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
      itemStyle: {
        normal: {
          color: "#28ffb3",
        },
      },
      areaStyle: {
        //区域填充样式
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,154,120,1)",
              },
              {
                offset: 1,
                color: "rgba(0,0,0, 0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
          shadowBlur: 12, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
      },
      data: yData2,
    },
  ],
};


const [barRef, myChart] = useEcharts(option, yData);
onMounted(() => {
  myChart.value?.on('click', (params) => {
    console.log('====', params)
  })
})
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .bar {
    width: 100%;
    height: 200px;
  }
}
</style>